<template>
  <view class="course-container">
    <view class="header-section">
      <text class="page-title">课程列表</text>
    </view>
    
    <view class="course-list">
      <view class="course-item" v-for="course in courseList" :key="course.id" @click="goToCourseDetail(course.id)">
        <image class="course-image" :src="course.image || '/static/logo.png'" mode="aspectFill"></image>
        <view class="course-info">
          <text class="course-name">{{ course.name }}</text>
          <text class="course-coach">教练：{{ course.coach }}</text>
          <view class="course-meta">
            <text class="course-time">时间：{{ course.time }}</text>
            <text class="course-capacity">容量：{{ course.booked }}/{{ course.capacity }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { courseApi } from '../../src/services/api'

// 课程列表数据
const courseList = ref([
  {
    id: 1,
    name: '瑜伽课程',
    coach: '张教练',
    time: '每天 09:00-10:00',
    booked: 8,
    capacity: 15,
    image: '/static/logo.png'
  },
  {
    id: 2,
    name: '动感单车',
    coach: '李教练',
    time: '每天 14:00-15:00',
    booked: 12,
    capacity: 20,
    image: '/static/logo.png'
  },
  {
    id: 3,
    name: '力量训练',
    coach: '王教练',
    time: '每天 18:00-19:00',
    booked: 6,
    capacity: 10,
    image: '/static/logo.png'
  }
])

// 页面加载时获取课程列表
onMounted(() => {
  fetchCourseList()
})

// 获取课程列表
const fetchCourseList = async () => {
  try {
    // 这里应该调用获取课程列表的API
    // const response: any = await courseApi.getCourseList()
    // courseList.value = response.data
    console.log('获取课程列表')
  } catch (error) {
    console.error('获取课程列表失败:', error)
    uni.showToast({
      title: '获取课程列表失败',
      icon: 'none'
    })
  }
}

// 跳转到课程详情页
const goToCourseDetail = (courseId: number) => {
  uni.navigateTo({
    url: `/pages/course/detail?id=${courseId}`
  })
}
</script>

<style lang="scss" scoped>
.course-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.course-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  
  &:active {
    opacity: 0.8;
  }
}

.course-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.course-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.course-coach {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.course-meta {
  display: flex;
  justify-content: space-between;
}

.course-time, .course-capacity {
  font-size: 24rpx;
  color: #999;
}
</style>